<template>
    <div class="first">
        <LoginHeader class="first_header">
            <img src="../../assets/njrpic/ic_menu.png" alt="" slot="i" @click="slideopen">
            <img src="../../assets/njrpic/pic_logo_soocas.png" alt="" slot="title">
            <img src="../../assets/njrpic/ic_share_home.png" alt="" slot="more" @click="jumpshare">
        </LoginHeader>
        <el-divider></el-divider>
        <firstMid/>
        <firstbot/>
        <el-drawer size="70%" :show-close='false' :modal='false' :visible.sync="firstdrawer" :direction="direction">
           <slidebarheader/>
</el-drawer>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
import firstMid from '@/components/njrcomponents/first_mid.vue'
import firstbot from '@/components/njrcomponents/firstbot.vue'
import slidebarheader from '@/components/njrcomponents/slidebarheader.vue'
export default {
    data(){
        return{
            firstdrawer:false,
             direction: 'ltr'
        }
    },
    components:{
        LoginHeader,
        slidebarheader,
        firstMid,
        firstbot,
    },
    methods:{
        slideopen(){
            this.firstdrawer=true
        },
        jumpshare(){
            this.$router.push('/index/first/share')
        }
    }
}
</script>
<style lang="less" scoped>
.first{
    .first_header{
        position: fixed;
    width: 96%;
    z-index: 99;
    background-color: white;
        >img{
           width: 8%;
        }
        >img:nth-child(2){
            width: 30%;
        }
    }
    .el-divider{
       height: 50px;
    background-color: #efefef;
    margin-top: 0;
    padding-top: 46px;
    margin-bottom: 0;
    }
  
}
</style>
<style lang="less" >

.first{
    .el-drawer.ltr, .el-drawer.rtl {
    top: 0;
    bottom: 0;
    height: 100%;
    background-color: #e8edf1;
}
}

</style>